<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style1.css">
	<script type="text/javascript" src="js/tween.js"></script>
</head>
<body>
	<div id="box">
		<div id="warp">
			<ul>
				<li>
					<span>姓名</span>
					<input id="txt1" type="text" name="name" placeholder="姓名">
				</li>
				<li>
					<textarea id="txt2" name="content" placeholder="内容" rows="5"></textarea>
					<input type="button" name="submit" value="提交" onclick="commit()">
				</li>
			</ul>
		</div>
		<div id="content">
			<ul>
				<li>
					<!-- <span>姓名</span>
					<p>测试留言测试留言测试留言测试留言测试留言测试留言测试留言测试留言测试留言测试留言测试留言测试留言</p>
					<input type="button" name="" value="删除" onclick="del(this)"> -->
				</li>
			</ul>
		</div>
	</div>
</body>
<script>
	var txt1 = document.getElementById('txt1');
	var liveWord = document.getElementById('txt2');
	var main_content = document.getElementById('content');
	var ul = main_content.getElementsByTagName('ul')[0];
	var timer;

	function commit(){
		if (txt1.value == '' || liveWord.value == '') {	
			alert('姓名或内容不能为空！');
			return;
		}
		var liObj = document.createElement('li');
		var str = '<span>姓名：' + txt1.value + '</span><p>内容：' + txt2.value +'</p><input type="button" name="" value="删除" onclick="del(this)">';
		liObj.innerHTML = str;
		ul.insertBefore(liObj,ul.firstChild);

		var start = 0;
		var end = liObj.offsetHeight;
		var change = end - start;
		var maxT = 30;
		var t = 0;

		liObj.style.height = '0px';

		clearInterval(timer);
		timer = setInterval(function(){
			t++;
			if (t >= maxT) {
				clearInterval(timer);
			}
			liObj.style.height = Tween.Bounce.easeOut(t,start,change,maxT) + 'px';
		},30);
	}

	function del(who){
		var nodeLi = who.parentNode;
		var start = nodeLi.offsetHeight;
		var end = 0;
		var change = end - start;
		var maxT = 30;
		var t = 0;
		clearInterval(timer);
		timer = setInterval(function(){
			t++;
			if (t >= maxT) {
				nodeLi.parentNode.removeChild(nodeLi);
				clearInterval(timer);
			}
			nodeLi.style.height = Tween.Bounce.easeOut(t,start,change,maxT) + 'px';
		},30);
	}
</script>
</html>